import React from 'react';
import ItemS from '../component/ItemS/ItemS'
import Loading from "../component/Loading/Loading";
import request from '../../utils/request'
import './OnSell.less'

export default class OnSell extends React.Component {
  state = {
    data: [],
    page: 1,
  };
  componentDidMount() {

    this.getData();

    addEventListener('scroll', () => {
      // 页面总高
      const scrollHeight = document.documentElement.scrollHeight;
      // 页面显示高度+滚动
      const scrollY = document.documentElement.clientHeight + window.scrollY;
      if (scrollHeight == scrollY) {
        this.changePage()
      }
    })
  };

  // 发送请求获取数据
  getData() {
    // console.log('请求触发');
    const url = `https://shop.sunofbeach.net/union/shop/onSell/${this.state.page}`;
    request(url).then(({ data }) => {
      this.setState({
        data: this.state.data.concat(data.tbk_dg_optimus_material_response.result_list.map_data)
      });
    });
    // console.log(url);
  };

  // 加载下一页
  changePage() {
    // console.log('加载下一页触发');
    this.setState({
      page: this.state.page + 1
    }, () => {
      this.getData();
    });
  };

  render() {
    return (
      <div className='On-sell'>
        {
          this.state.data.map((item, i) => (
            <ItemS key={i} data={item}></ItemS>
          ))
        }
        <Loading></Loading>
      </div>
    )
  };
}